<template>
  <section class="pop-start"
    v-show="isShow">
    <div class="box-logo">
      <img src="@/assets/game_logo.png" alt="">
    </div>
    <div class="primary-red">Web Edition</div>
    <div class="box-creator">
      <div class="text-center">(ver. 20250909)</div>
      <div class="text-center">原桌游由Jeremiah Lee设计。为了更好的可玩性，Youngbeen基于原游戏设计做了一些调整，并实现了此程序版本</div>
      <div class="text-center">All game program copyright reserved by Youngbeen 2024-present</div>
    </div>
    <div class="desc style-font" :data-content="desc">
      {{ desc }}
    </div>
    <div class="select-player text-center">
      <div class="box-player"
        :class="[selectedPlayer === '1' && 'active']"
        @click="togglePlayer('1')">
        <div class="avatar char-backpacker"></div>
      </div>
      <div class="box-player"
        :class="[selectedPlayer === '2' && 'active']"
        @click="togglePlayer('2')">
        <div class="avatar char-sportgirl"></div>
      </div>
      <div class="box-player"
        :class="[selectedPlayer === '3' && 'active']"
        @click="togglePlayer('3')">
        <div class="avatar char-oldman"></div>
      </div>
      <div class="box-player"
        :class="[selectedPlayer === '4' && 'active']"
        @click="togglePlayer('4')">
        <div class="avatar char-soldier"></div>
      </div>
    </div>
    <div class="select-player text-center">
      <div class="box-player"
        :class="[selectedPlayer === '5' && 'active']"
        @click="togglePlayer('5')">
        <div class="avatar char-boxer"></div>
      </div>
      <div class="box-player"
        :class="[selectedPlayer === '6' && 'active']"
        @click="togglePlayer('6')">
        <div class="avatar char-fatboy"></div>
      </div>
      <div class="box-player"
        :class="[selectedPlayer === '7' && 'active']"
        @click="togglePlayer('7')">
        <div class="avatar char-moviefan"></div>
      </div>
      <div class="box-player"
        :class="[selectedPlayer === '8' && 'active']"
        @click="togglePlayer('8')">
        <div class="avatar char-lumberjack"></div>
      </div>
    </div>
    <div class="char-desc">
      {{ characterDesc }}
    </div>
    <div class="text-center" style="margin-top: 20px;">
      <button class="primary-button start-button"
        @click="start()">开始</button>
    </div>
    <div class="text-center" style="margin-top: 20px;">
      <button class="primary-button start-button"
        @click="refreshPage()">刷新</button>
    </div>
  </section>
</template>

<script>
import eventBus from '@/EventBus'
import player from '@/models/Player'

const PlayerMap = {
  1: 'backpacker',
  2: 'sportgirl',
  3: 'oldman',
  4: 'soldier',
  5: 'boxer',
  6: 'fatboy',
  7: 'moviefan',
  8: 'lumberjack'
}
const characterDescMap = {
  1: '旅行者：身上可以多携带一件物品，初始携带一根蜡烛',
  2: '健身女孩：行动敏捷，在最终时间前能完成更多事件。初始携带一罐苏打水',
  3: '中年男人：初始携带一桶汽油',
  4: '特种兵：初始携带一枚手雷，可炸死一个房间的所有丧尸',
  5: '拳击手：初始携带一副拳击手套，能对丧尸造成更高伤害',
  6: '小胖：特别能吃，初始生命值+4',
  7: '电影迷：看过很多丧尸电影，非常熟悉套路，所以有时可以躲开丧尸不被发现',
  8: '伐木工：初始携带一把链锯'
}
export default {
  data () {
    return {
      isShow: true,
      desc: '丧尸到处游荡，你必须在午夜12点的钟声前，找到有邪恶祭坛的房子，拿到邪恶图腾并带到外面的墓地将其埋入土中才能令逝者安息...',
      selectedPlayer: '1'
    }
  },
  computed: {
    characterDesc () {
      return characterDescMap[this.selectedPlayer]
    }
  },

  mounted () {
    eventBus.$on('notifyMessageAction', ({ action, tag }) => {
      if (action === 'confirm' && tag && tag.source === 'restart') {
        this.isShow = true
      }
    })
  },

  beforeDestroy () {
    eventBus.$off('notifyMessageAction')
  },

  methods: {
    togglePlayer (val) {
      this.selectedPlayer = val
    },
    start () {
      player.character = PlayerMap[this.selectedPlayer]
      this.isShow = false
      this.selectedPlayer = '1'
      eventBus.$emit('notifyStart')
    },
    refreshPage () {
      window.location.reload()
    }
  }
}
</script>

<style scoped lang="less">
.pop-start {
  position: fixed;
  z-index: 41;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  color: #fff;
}
.box-logo {
  margin-top: 40px;
  text-align: center;
  img {
    width: 400px;
  }
}
.primary-red {
  color: red;
  text-align: center;
  font-size: 40px;
}
.box-creator {
  padding: 12px 48px;
  color: #8d8d8d;
}
.desc {
  // margin-top: 40px;
  padding: 12px 48px;
  color: red;
  font-size: 28px;
}
.select-player {
  .box-player {
    display: inline-block;
    padding: 8px;
    border: 6px solid transparent;
    border-radius: 12px;
    opacity: 0.7;
    overflow: hidden;
    transition: all 0.3s;
    &.active {
      border: 6px solid red;
      opacity: 1;
    }
    .avatar {
      width: 140px;
      height: 140px;
      border-radius: 8px;
    }
  }
}
.char-desc {
  padding: 24px 48px;
  font-size: 26px;
}
.start-button {
  width: 400px;
}
</style>
